import React from "react";

// React中只有类组件才会有生命周期

class Life extends React.Component{
    constructor(){
        super()
        // 1.初始化state
        this.state={
            count:0,
        }
        console.log("constructor");
        // 2.修改事件处理函数的this指向
        this.getFn=this.getFn.bind(this)
        this.stop=null;
    }
    getFn(){
        // this.setState({
        //     count:this.state.count+1
        // })
        // 强制更新
        this.forceUpdate()
    }
    render(){
        // 1.渲染UI
        // 注意：不能在render里面调用setState
        // this.setState({
        //     count:this.state.count+1
        // })
        console.log("render");
        return <div>
            <h1 id="title" onClick={this.getFn}>React 类组件的生命周期-------{this.state.count}</h1>
        </div>
        
    }
    // 更新后:每次在render执行后执行该生命周期钩子
    componentDidUpdate(){
        // 1.发送网络请求
        // 2.DOM操作
        // 3.在这个钩子中使用setState需要放在if条件语句中执行
        // if(){
        //     this.setState({})

        // }
        console.log("componentDidUpdate");
    }
    // 挂载后
    componentDidMount(){
        // 1.发送网络请求
        // 2.DOM操作
        console.log("componentDidMount")
        // console.log("h1节点：",document.getElementById("title"))

        this.stop=setInterval(()=>{
            this.setState({
                count:this.state.count+1
            })
        },1000)


    }
    // 卸载后
    componentWillUnmount(){
        // 1.执行清理工作（清零定时器）
        console.log("componentWillUnmount");
        clearInterval(this.stop)
    }
}


export default Life